import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class MenuBarMixin extends Vue {
  private openKeys: string[] = []
  private selectedKeys: string[] = []
  pathKeys: { [propName: string]: string } = {}

  private mounted () {
    this.setSelectedKeys()
  }

  @Watch('$route')
  private watchRoute () {
    this.setSelectedKeys()
  }

  private setSelectedKeys () {
    const path = this.$route.path
    this.selectedKeys.splice(0, this.selectedKeys.length, path)
    if (path in this.pathKeys) {
      // @ts-ignore
      this.openKeys.splice(0, this.openKeys.length, this.pathKeys[path])
    } else {
      this.openKeys.splice(0, this.openKeys.length)
    }
  }

  private onMenuClick ({ key: path }: any) {
    this.$router.push(path)
  }

  private onOpenChange (openKeys: string[]) {
    if (openKeys.length > 0) {
      this.openKeys.splice(0, this.openKeys.length, openKeys[openKeys.length - 1])
    } else {
      this.openKeys.splice(0, this.openKeys.length)
    }
  }
}
